<template>
  <header class="bg-white border-b border-gray-200" style="height: 100px;padding-top: 20px;padding-left: 20px;padding-right: 20px;">
    <div class=" mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <!-- Logo and brand -->
        <NuxtLink to="/" class="flex items-center space-x-3" style="padding-bottom: 10px;">
          <!-- <div class="flex items-center space-x-2">
            <div class="w-8 h-8 bg-green-600 rounded flex items-center justify-center">
              <span class="text-white font-bold text-sm">3E</span>
            </div>
            <span class="text-xl font-bold text-gray-900">Ambition</span>
            <span class="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">3E</span>
          </div>
          <div class="h-6 w-px bg-gray-300 mx-4"></div>
          <span class="text-gray-600 text-sm font-medium">CBAM SERVICE PLATFORM</span> -->
          <img src="/images/logo.png" alt="" class="hidden lg:block" style="height: 40px;width: auto;">
        </NuxtLink>

        <!-- Navigation -->
       

        <!-- Search and Login -->
        <div class="flex items-center space-x-4">
          <nav class="hidden md:flex items-center xl:space-x-8 lg:space-x-6 md:space-x-4" style="zoom: 0.9; transform-origin: left center;">
          <NuxtLink to="/" class="text-gray-700 hover:active-nav font-medium text-base" active-class="active-nav">Home</NuxtLink>
          
          <!-- Model Solutions dropdown -->
          <div class="relative" @mouseenter="showDropdown1Menu" @mouseleave="hideDropdown1">
            <button class="flex items-center text-gray-700 hover:active-nav font-medium text-base" :class="isModelSolutionsActive ? 'active-nav' : ''">
              Model Solutions
              <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            <div v-show="showDropdown1" class="absolute top-full left-0 w-max bg-white rounded-md shadow-lg border border-gray-200 z-50 mt-1">
              <div class="py-1">
                <div href="https://www.e3pathways.org" @click="goTo('https://www.e3pathways.org')" style="font-size: 14px;" class="cursor-pointer block px-4 py-2  text-gray-700 hover:bg-gray-100 whitespace-nowrap">E3 Pathways</div>
                <NuxtLink to="/article/23" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap" style="font-size: 14px;">Global E3METL</NuxtLink>
                <NuxtLink to="/article/22" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap" style="font-size: 14px;">China C3METL</NuxtLink>
                <NuxtLink to="/article/24" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap" style="font-size: 14px;">Regional REEC</NuxtLink>
              </div>
            </div>
          </div>

          <!-- Net Zero Plans dropdown -->
          <div class="relative" @mouseenter="showDropdown2Menu" @mouseleave="hideDropdown2">
            <button class="flex items-center text-gray-700 hover:active-nav font-medium text-base" :class="isNetZeroPlansActive ? 'active-nav' : ''">
              Net Zero Plans
              <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            <div v-show="showDropdown2" class="absolute top-full left-0 w-max bg-white rounded-md shadow-lg border border-gray-200 z-50 mt-1">
              <div class="py-1">
               
                <NuxtLink to="/echart/listIndustry" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap"> CBAM Service Platform</NuxtLink>

                <NuxtLink to="/plan/qiye" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap">Corporate Carbon Accounting</NuxtLink>
                <NuxtLink to="/plan/can" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap">Catering Carbon Accounting</NuxtLink>
                <NuxtLink to="/plan/CSR" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap">Corporate Social Responsibility</NuxtLink>
                <NuxtLink to="/plan/foot" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap">Carbon Offset</NuxtLink>
                <NuxtLink to="/plan/ESG" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap">ESG Management</NuxtLink>
              </div>
            </div>
          </div>

          

          <!-- Expert team dropdown -->
          <div class="relative" @mouseenter="showDropdown3Menu" @mouseleave="hideDropdown3">
            <button class="flex items-center text-gray-700 hover:active-nav font-medium text-base" :class="isAboutUsActive ? 'active-nav' : ''">
              About Us
              <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            <div v-show="showDropdown3" class="absolute top-full left-0 w-max bg-white rounded-md shadow-lg border border-gray-200 z-50 mt-1">
              <div class="py-1">
                <NuxtLink to="/member/expert" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap">Research Networks</NuxtLink>
                <NuxtLink to="/member/achievement" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap">Achievements</NuxtLink>
                <NuxtLink to="/member/dynamics" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap">News Room</NuxtLink>
              </div>
            </div>
          </div>

          <NuxtLink to="/about" class="text-gray-700 hover:active-nav font-medium text-base" active-class="active-nav">Contact</NuxtLink>
        </nav>
          <!-- Search icon -->
        <!-- <NuxtLink to="/about" class="text-gray-700 hover:active-nav font-medium">
          <button class="p-2 text-gray-400 hover:text-gray-600 cursor-pointer">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
            <img src="/images/phone.png" alt="" style="height: 50px;width: 50px;">
          </button>
        </NuxtLink> -->
          <!-- User menu -->
          <div v-if="isLoggedIn" class="relative" @mouseenter="showUserDropdown" @mouseleave="hideUserDropdown">
            <div class="flex items-center space-x-2 cursor-pointer hover:bg-gray-50 px-3 py-2 rounded-md">
              <div class="h-8 w-8 rounded-full flex items-center justify-center text-white text-sm font-medium flex-shrink-0" 
                   style="background: linear-gradient(135deg, #5DADE2 0%, #48C9B0 100%);">
                {{ avatarText }}
              </div>
              <span class="text-gray-700 font-medium truncate max-w-[150px]" :title="fullName">{{ fullName }}</span>
              <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
              </svg>
            </div>
            <div v-show="showDropdown" class="absolute top-full right-0 w-48 bg-white rounded-md shadow-lg border border-gray-200 z-50" style="margin-top: 0;">
              <div class="py-1">
                <NuxtLink to="/user" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">User Info</NuxtLink>
                <button @click="logout" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</button>
              </div>
            </div>
          </div>

          <!-- Contact Us Icon -->
          <NuxtLink to="/about" class="flex items-center justify-center p-2 text-gray-700 hover:active-nav transition-colors">
            <img src="/images/i-contact-us@2x.png" alt="Contact Us" class="w-6 h-6" />
          </NuxtLink>

          <!-- Login button -->
          <div v-if="!isLoggedIn">
            <button @click="login" style="background-color: #366ca1;" class="cursor-pointer bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full font-medium transition-colors">
              Login
            </button>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useLoginDialog } from '~/composables/useLoginDialog'

const { $auth } = useNuxtApp()
const { showLoginDialog } = useLoginDialog()
const route = useRoute()

const isLoggedIn = computed(() => $auth.isLoggedIn.value)
const fullName = computed(() => $auth.user.value?.fullName || $auth.user.value?.name || $auth.user.value?.email || '')
const userAvatar = computed(() => $auth.user.value?.picture || '/images/user.png')

// 计算头像显示文字
const avatarText = computed(() => {
  const name = fullName.value || 'U'
  
  // 检测是否包含中文字符
  const hasChinese = /[\u4e00-\u9fa5]/.test(name)
  
  if (hasChinese) {
    // 中文名字：取后两个字符
    return name.length >= 2 ? name.slice(-2) : name
  } else {
    // 英文名字：取最后一个单词（lastName）的首字母，大写
    const words = name.trim().split(/\s+/)
    const lastName = words[words.length - 1]
    return lastName ? lastName.charAt(0).toUpperCase() : 'U'
  }
})

const showDropdown = ref(false)
const showDropdown1 = ref(false)
const showDropdown2 = ref(false)
const showDropdown3 = ref(false)
const goTo = (url) => {
  window.open(url, '_blank')
}
// 计算当前激活的菜单项
const isModelSolutionsActive = computed(() => 
  route.path.startsWith('/article/23') || // E3METL Model
  route.path.startsWith('/article/22') || // CE3METL Model
  route.path.startsWith('/article/24') // REEC Model
)

const isNetZeroPlansActive = computed(() => 
  route.path.startsWith('/plan/qiye') || 
  route.path.startsWith('/plan/can') || 
  route.path.startsWith('/plan/CSR') || 
  route.path.startsWith('/plan/foot') || 
  route.path.startsWith('/plan/ESG')
)

const isAboutUsActive = computed(() => 
  route.path.startsWith('/member/expert') || 
  route.path.startsWith('/member/achievement') || 
  route.path.startsWith('/member/dynamics')
)

let timeout1, timeout2, timeout3, timeoutUser

const login = () => {
  // 打开登录弹窗
  showLoginDialog('login')
}

const logout = async () => {
  $auth.logout()
  await navigateTo('/login')
}

const showDropdown1Menu = () => {
  clearTimeout(timeout1)
  showDropdown1.value = true
}

const showDropdown2Menu = () => {
  clearTimeout(timeout2)
  showDropdown2.value = true
}

const hideDropdown1 = () => {
  timeout1 = setTimeout(() => {
    showDropdown1.value = false
  }, 200)
}

const hideDropdown2 = () => {
  timeout2 = setTimeout(() => {
    showDropdown2.value = false
  }, 200)
}

const showUserDropdown = () => {
  clearTimeout(timeoutUser)
  showDropdown.value = true
}

const hideUserDropdown = () => {
  timeoutUser = setTimeout(() => {
    showDropdown.value = false
  }, 200)
}

const showDropdown3Menu = () => {
  clearTimeout(timeout3)
  showDropdown3.value = true
}

const hideDropdown3 = () => {
  timeout3 = setTimeout(() => {
    showDropdown3.value = false
  }, 200)
}
</script>

<style scoped>
/* 只针对导航菜单中的下拉菜单容器 */
nav .relative {
  @media screen and (max-width: 1230px) {
    margin-right: 10px !important;
  }
}

/* 或者更具体地针对下拉菜单 */
.dropdown-container {
  @media screen and (max-width: 1230px) {
    margin-right: 10px !important;
  }
}
.active-nav {
  color: #3A954F;
}
nav a,
nav .dropdown-container {
  cursor: pointer;
}
</style>